<template>
  <!-- 验证码 结束见证 -->
  <el-dialog :title="headerTitle" :visible.sync="visible" width="500px" class="cancel-dialog" @close="cancelCloseFn">
    <div class="info">
      <i class="el-icon-warning" />
      {{ message }}
    </div>
    <el-form
      ref="cancelForm"
      class="ui-mt10"
      :model="cancelForm"
      :rules="cancelRules"
      label-width="80px"
      :inline="false"
      size="normal"
      on-submit="return false;"
    >
      <el-form-item label="验证码" required prop="code">
        <el-input v-model="cancelForm.code" class="ui-w100" />
        <span title="看不清？换一张" @click="refreshCode">
          <s-identify class="ui-w120" :identify-code="identifyCode" />
        </span>
        <el-button type="text" size="default" @click="refreshCode">看不清？换一张</el-button>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button type="primary" :loading="cancelLoading" @click="cancelSubmitFn">确定</el-button>
      <el-button @click="cancelCloseFn">取消</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import SIdentify from "../../components/sidentify.vue";
  export default {
    name: "VerificationCodeDialog",
    components: { SIdentify },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      headerTitle: {
        type: String,
        default: ""
      },
      message: {
        type: String,
        default: ""
      }
    },
    data() {
      // 验证码校验
      const validateCode = (rule, value, callback) => {
        if (value === "" || typeof value === "undefined") {
          callback(new Error("验证码不能为空"));
        } else if (value !== this.identifyCode) {
          callback(new Error("验证码不正确"));
        } else {
          callback();
        }
      };
      return {
        visible: false,
        dialogTitle: "",
        identifyCode: "",
        cancelLoading: false,
        cancelVisible: false,
        cancelForm: {},
        cancelRules: {
          // reason: [
          //   { required: true, message: "停止原因不能为空", trigger: "blur" },
          // ],
          code: [
            {
              validator: validateCode,
              trigger: "blur"
            },
            { required: true, message: "验证码不能为空", trigger: "change" }
          ]
        }
      };
    },
    computed: {},
    watch: {
      show() {
        this.visible = this.show;
        this.refreshCode();
      }
    },
    methods: {
      inputEnterFn() {
        return false;
      },
      // 验证码开始
      refreshCode() {
        this.identifyCode = this.makeCode("1234567890", 4);
      },
      makeCode(o, l) {
        let code = "";
        for (let i = 0; i < l; i++) {
          code += o[this.randomNum(0, o.length)];
        }
        return code;
      },
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      },
      // 验证码结束
      // 取消见证-提交
      cancelSubmitFn() {
        this.$refs["cancelForm"].validate((valid) => {
          if (valid) {
            if (this.cancelForm.code == this.identifyCode) {
              this.cancelLoading = true; // loading
              console.log("111");
              this.$emit("submit");
              // this.taskCancelFn();
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      // 取消见证-提交
      cancelCloseFn() {
        this.cancelVisible = false;
        this.cancelLoading = false;
        this.$refs["cancelForm"].resetFields();
        // this.$refs[formName].resetFields();
        this.$emit("close");
      }
    }
  };
</script>
<style lang="scss" scoped>
  .info {
    padding-left: 28px;
    position: relative;
    i {
      position: absolute;
      top: 0;
      left: 0;
      color: #e6ad00;
      font-size: 18px;
      vertical-align: top;
    }
  }
</style>
